<template>
	<a-layout class="view">
		<a-layout-header>
			<!-- 顶部导航栏区域 -->
			<a-menu
				mode="horizontal"
				:style="{
					height: '70px'
				}"
				:selected-keys="activeRoute"
			>
				<!-- 模拟logo -->
				<a-menu-item
					:style="{ padding: 0, marginRight: '38px' }"
					disabled
				>
					<div class="mork-logo" text="Amadeus" @click="goPage('/')">
						Amadeus
					</div>
				</a-menu-item>
				<!-- 循环item -->
				<a-menu-item
					v-for="item in menuItems"
					:key="item.path"
					@click="goPage(item.path)"
					>{{ item.name }}</a-menu-item
				>
				<!-- 头像 -->
				<a-menu-item
					:style="{
						position: 'absolute',
						right: '250px'
					}"
					disabled
				>
					<a-input-search
						:style="{ width: '250px' }"
						placeholder="搜索电影或文章"
						@search="search"
					/>
				</a-menu-item>
				<a-menu-item
					:style="{
						position: 'absolute',
						right: '175px'
					}"
				>
					<a-switch v-model="isTheme" @change="changeTheme">
						<template #checked-icon>
							<icon-moon-fill />
						</template>
						<template #unchecked-icon>
							<icon-sun-fill />
						</template>
					</a-switch>
				</a-menu-item>
				<a-sub-menu
					:style="{
						position: 'absolute',
						right: '64px'
					}"
					icon="none"
				>
					<template #icon
						><a-avatar
							:style="{ backgroundColor: '#95a5a6' }"
							v-if="avatarUrl && avatarUrl !== 'undefined'"
							><img :src="avatarUrl" />
						</a-avatar>
						<a-avatar v-else>{{ username || '未登录' }}</a-avatar>
					</template>
					<a-menu-item @click="goPage('/userInfo')">
						<div class="avatar_menu_item">
							<icon-user size="18" />
							{{ username || '未登录' }}
						</div>
					</a-menu-item>
					<a-menu-item @click="goPage('/userFavorite')">
						<div class="avatar_menu_item">
							<icon-heart-fill size="18" />
							我的收藏
						</div>
					</a-menu-item>
					<a-menu-item @click="goPage('/userComment')">
						<div class="avatar_menu_item">
							<icon-message size="18" />
							我的评论
						</div>
					</a-menu-item>
					<a-menu-item @click="goPage('/userMail')">
						<div class="avatar_menu_item">
							<a-badge :count="9" dot :offset="[2, -2]">
								<IconNotification
									:style="{
										color: '#888',
										fontSize: '18px',
										verticalAlign: '-3px'
									}"
								/>
							</a-badge>
							我的站内信
						</div>
					</a-menu-item>
					<a-menu-item @click="loginOut" v-show="username">
						<div class="avatar_menu_item">
							<icon-poweroff size="18" />
							退出登录
						</div>
					</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</a-layout-header>
		<a-layout-content class="content">
			<!-- 主区域 -->
			<router-view v-slot="{ Component }">
				<transition name="fade" mode="out-in">
					<keep-alive>
						<component :is="Component" :key="route.fullPath" />
					</keep-alive>
				</transition>
			</router-view>
			<find-top></find-top>
		</a-layout-content>
		<a-layout-footer class="footer">
			<div class="footer-href">
				<a href="http://localhost:5173/">Amadeus</a>
				<a href="http://localhost:5173/">About</a>
				<a href="http://localhost:5173/">Home</a>
				<a href="http://localhost:5173/">Amadeus</a>
			</div>
			<p>本网站不为商业用途，只用于个人技术展示</p>
			<p>
				<a href="https://gitee.com/amdeus-top/movie-view"
					>本网站已开源在gitee上</a
				>
			</p>
			<p>
				本网站所有数据均来自于猫眼官网，如有侵权请联系2956334791@qq.com删除
			</p>
		</a-layout-footer>
	</a-layout>
</template>
<script setup>
import { RouterView, useRouter, useRoute } from 'vue-router'
import { useHoemStore } from '../store/home'
import color from '../utils/colorVar'
const router = useRouter()
const route = useRoute()
const activeRoute = ref(['/'])
const homeStore = useHoemStore()
const menuItems = [
	{
		name: '首页',
		path: '/'
	},
	{
		name: '电影',
		path: '/movie'
	},
	{
		name: '新闻',
		path: '/news'
	}
]
const isTheme = ref(localStorage.getItem('Theme'))
const username = ref(localStorage.getItem('userName'))
const avatarUrl = ref(localStorage.getItem('avatarUrl'))
// 监听路由变化 从而改变导航栏选中项
watch(
	// shallowRef() 函数是浅层响应，只有对value整体修改，才能更新到视图层
	// router.currentRoute 是一个shallowRef包裹的对象
	() => router.currentRoute.value.path,
	newValue => {
		activeRoute.value[0] = newValue
	},
	{ immediate: true }
)
// 前往对应页面
function goPage(path) {
	router.push(path)
}
// 搜索电影或文章
function search(value) {
	if (value === '') {
		// eslint-disable-next-line no-undef
		return AMessage.error('请输入搜索内容!')
	} else {
		homeStore.update('search', value)
		router.push({
			name: 'searchPage'
		})
	}
}
// 退出登录
function loginOut() {
	location.reload()
	localStorage.clear()
}
// 修改主题
function changeTheme() {
	localStorage.setItem('Theme', isTheme.value)
	const varList = Object.entries(isTheme.value ? color.dark : color.white)
	varList.forEach(([key, val]) => {
		document.body.style.setProperty(key, val)
	})
}
</script>
<style lang="scss" scoped>
.view {
	min-width: 1450px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: var(--normal-distance);
	background-color: var(--main-bg);
	margin: 0 auto;
	overflow: hidden;

	.content {
		flex: 1;
		min-height: 0;
	}

	.mork-logo {
		font-size: 2rem;
		cursor: pointer;
		color: var(--fc-bg);
	}

	.mork-logo::after {
		content: attr(text);
		position: absolute;
		top: 0;
		left: 0;
		color: transparent;
		animation: SpotLight 5s infinite;
		background-image: linear-gradient(to bottom right, #d35400, #c0392b);
		background-size: 150%;
		background-position: center center;
		background-clip: text;
		-webkit-background-clip: text;
		/* 定义裁剪的可视区域 */
		/* ellipse代表定义一个椭圆  两个半径和xy轴位置 */
		clip-path: ellipse(25px 25px at 0% 50%);
	}

	/* 通过移动可视区域来实现聚光灯效果 */
	@keyframes SpotLight {
		0% {
			clip-path: ellipse(25px 25px at 0% 50%);
		}

		50% {
			clip-path: ellipse(25px 25px at 100% 50%);
		}

		100% {
			clip-path: ellipse(25px 25px at 0% 50%);
		}
	}

	.avatar_menu {
		display: flex;
		justify-content: center;
		align-items: center;

		.avatar_menu_item {
			cursor: pointer;
		}
	}

	// 页面之间切换动画
	.fade-enter-from,
	.fade-leave-to {
		/*定义进入开始和离开结束的透明度为0*/
		opacity: 0;
	}

	.fade-leave-to {
		transform: translateX(20px);
	}

	.fade-enter-to {
		transform: translateX(-20px);
	}

	.fade-enter-to,
	.fade-leave-from {
		/*定义进入结束和离开开始的透明度为1*/
		opacity: 1;
	}

	.fade-leave-active,
	.fade-enter-active {
		transition: all 0.5s ease;
	}

	// 底部内容
	.footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--normal-distance);
		padding: var(--normal-distance);
		background-color: #7f8c8d;

		.footer-href {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: var(--normal-distance);

			a {
				text-decoration: none;
				color: black;
			}

			a:hover {
				color: #34495e;
			}
		}

		p {
			margin: 0;

			a {
				text-decoration: none;
				color: black;
			}

			a:hover {
				color: #34495e;
			}
		}
	}
}
:deep(.arco-menu-light) {
	background-color: var(--main-2-bg);
}
:deep(.arco-menu-horizontal .arco-menu-item),
:deep(.arco-menu-light .arco-menu-pop-header) {
	color: var(--fc-bg);
	background-color: var(--main-2-bg);
}
:deep(.arco-input-wrapper) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
:deep(
		.arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected
	) {
	&:hover {
		background: none;
	}
}
:deep(.arco-radio-label),
:deep(.arco-textarea-wrapper) {
	color: var(--fc-bg);
}
</style>
<style lang="scss">
.arco-menu-horizontal .arco-menu-item .arco-icon {
	margin-right: 0;
}
.arco-trigger-menu {
	color: var(--fc-bg);
	background-color: var(--main-2-bg);
	border: 1px solid #ccc;
}
.arco-trigger-menu-inner {
	.arco-trigger-menu-item + .arco-trigger-menu-item {
		border-top: 1px solid #ccc;
	}
}
.arco-trigger-menu-item,
.arco-trigger-menu-pop-header {
	color: var(--fc-bg);
}
</style>
